<template>
  <div
    class="e-charstyle1"
    :class="{ shifted1: rightShifted, visible: isVisible }"
  >
    <div class="title-item">经济发展</div>
    <div ref="echartsContainer" class="e-ch-item"></div>
    <div class="title-item">行业占比</div>
    <div ref="echarts1Container" class="e-ch-item"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
export default {
  props: ["rightShifted"],
  setup(props) {
    const echartsContainer = ref(null);
    const echarts1Container = ref(null);
    const isVisible = ref(true);
    // 监听左移状态的变化，根据变化来控制显示和隐藏
    watch(
      () => props.rightShifted,
      (newVal) => {
        console.log(newVal);
        isVisible.value = !newVal; // 设置 isVisible 的值与 rightShifted 相反
      }
    );
    onMounted(() => {
      // 在组件挂载后执行的逻辑
      // 使用 echartsContainer.value 获取容器元素

      // 基于准备好的容器，初始化 ECharts 实例
      const data = [
        ["2017", 116],
        ["2018", 129],
        ["2019", 135],
        ["2020", 86],
        ["2021", 73],
        ["2022", 85],
        ["2023", 42],
      ];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      const chart = echarts.init(echartsContainer.value);
      chart.resize({
        width: 300,
        height: 200,
      });
      // 构建图表配置
      const option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 200,
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "10%", // 通过百分比设置图表与容器顶部的间距
          left: "15%",
        },

        xAxis: {
          data: dateList,
          boundaryGap: false,
          axisLabel: {
            interval: 0,
            fontSize: 9, // 设置 x 轴刻度标签的字体大小
            color: "white",
          },
          interval: 1,
        },
        yAxis: {
          gridIndex: 0,
          axisLabel: {
            interval: 0, // 设置刻度标签全部显示
            fontSize: 9, // 设置 x 轴刻度标签的字体大小
            color: "white",
          },
          axisLine: {
            show: true, // 显示 y 轴实线
          },
        },
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList,
          },
        ],
      };
      const chart1 = echarts.init(echarts1Container.value);
      chart1.resize({
        width: 300,
        height: 200,
      });
      const option1 = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "餐饮" },
              { value: 735, name: "教育" },
              { value: 580, name: "医疗" },
              { value: 484, name: "物流" },
              { value: 300, name: "娱乐" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      chart.setOption(option);
      chart1.setOption(option1);
    });
    return {
      echartsContainer,
      echarts1Container,
      isVisible,
    };
  },
};
</script>

<style scoped>
.e-charstyle1 {
  position: absolute;
  top: 16%;
  right: 13.5%;
  transform: translate(50%);
  width: 25%;
  background-color: #110458e3;
  height: 31rem;
  /* border:2px solid rgb(9, 170, 245);*/
  box-shadow: 0px 0 10px rgb(9, 170, 245);
  transition: transform 0.5s ease-in-out;
}
.e-ch-item {
  width: 100%;
  height: 12rem;
}
.title-item {
  font-size: 0.8rem;
  background-color: #110458e3;
  text-align: left;
  padding: 0.4rem 0.6rem;
}
.shifted1 {
  transform: translateX(156%) !important;
}
</style>